<template>
    <div id="SideToolBox">
        <div class="sideTool">
            <div class="sideTool-item">
                <i class="fa fa-calendar-plus-o sideTool-itemIcon" @click="issueProblem"></i>
                <span class="sideTool-itemPrompt">发布问题</span>
            </div>

            <div class="sideTool-item">
                <i class="fa fa-commenting-o sideTool-itemIcon" @click="pushComment"></i>
                <span class="sideTool-itemPrompt">发布评论</span>
            </div>

            <div class="sideTool-item">
                <i class="fa fa-question sideTool-itemIcon" @click="help"></i>
                <span class="sideTool-itemPrompt">帮助文档</span>
            </div>

            <div class="sideTool-item">
                <i class="fa fa-chevron-up sideTool-itemIcon" @click="backTop"></i>
                <span class="sideTool-itemPrompt">返回顶部</span>
            </div>

            <div class="sideTool-modelBox">
                <a-modal
                    v-model="modelBoxVisible"
                    :destroyOnClose="true"
                    :closable="false"
                    width="720px"
                    cancelText="取消"
                    okText="发布"
                    @cancel="clickCancel(modelBoxId)"
                    @ok="clickOk(modelBoxId)"
                >
                    <h3>
                        <a-icon style="color: #1890ff" :type="modelBoxIcon"/>
                        {{ modelBoxTitle }}
                    </h3>
                    <p>{{ modelBoxTip }}</p>
                    <ckeditor v-model="editorData"></ckeditor>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SideToolBox",
        props: {
            backTopMoveValue: {
                type: Number,
                default: 16
            }
        },
        data() {
            return {
                createEle: this.$createElement,
                modelBoxId: 'issueQuestion',
                modelBoxTitle: '发布问题',
                modelBoxIcon: 'form',
                modelBoxTip: '编辑你想要发布的问题内容，点击确认进行发布！',
                modelBoxVisible: false,
                editorData: ''
            }
        },
        methods: {
            issueProblem: function() {
                this.modelBoxId = 'issueQuestion'
                this.modelBoxTitle = '发布问题';
                this.modelBoxIcon = 'form';
                this.modelBoxTip = '编辑你想要发布的问题内容，点击确认进行发布！';

                this.showModelBox();
            },
            pushComment: function() {
                this.modelBoxId = 'issueDiscussion'
                this.modelBoxTitle = '发布讨论';
                this.modelBoxIcon = 'message';
                this.modelBoxTip = '在这里留下你想对这个问题的讨论吧！';

                this.showModelBox();
            },
            help: function() {
                this.$info({
                    title: '帮助文档',
                    icon: 'question-circle',
                    maskClosable: true,
                    okText: '关闭文档',
                    content: ('div', [
                        this.createEle('p', '发布问题：编辑你想要发布的问题内容，点击确认进行发布'),
                        this.createEle('p', '发布讨论：在这里留下你想对这个问题的讨论吧'),
                        this.createEle('p', '帮助文档：点击查询帮助信息'),
                        this.createEle('p', '返回顶部：点击返回页面顶部'),
                    ]),
                    onOk() {
                        // 点击按钮后的回调函数
                    },
                    destroyOnClose: true
                });
            },
            backTop: function () {
                const that = this;
                let scrollTopValue = document.documentElement.scrollTop;

                let toTop = setInterval(function () {
                    let moveValue = Math.floor(scrollTopValue / that.backTopMoveValue);

                    moveValue > 0 ? scrollTopValue -= moveValue : scrollTopValue = 0;

                    window.scrollTo(0, scrollTopValue);

                    if(!scrollTopValue) {
                        clearInterval(toTop);
                    }
                }, 17);
            },
            showModelBox: function () {
                this.modelBoxVisible = !this.modelBoxVisible;
            },
            clickCancel: function(id) {
                const that = this;

                const idType = {
                    "issueQuestion": function () {
                        console.log(id , '+', that.editorData);
                    },
                    "issueDiscussion": function () {
                        console.log(id , '+', that.editorData);
                    }
                }
                idType[id]();

                this.editorData = '';
                this.showModelBox();
            },
            clickOk: function (id) {
                const that = this;

                const idType = {
                    "issueQuestion": function () {
                        console.log(id , '+', that.editorData);
                    },
                    "issueDiscussion": function () {
                        console.log(id , '+', that.editorData);
                    }
                }
                idType[id]();

                this.$message.success('成功操作', 5);
                that.editorData = '';

                this.showModelBox();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sideTool {
        position: fixed;
        right: 2em;
        bottom: 2.5em;
    }
    .sideTool-item {
        position: relative;
        height: 2.25em;
        width: 2.25em;
        margin-top: 0.75em;
        border: 1px solid #999999;
        box-shadow: 2px 2px 5px rgba(150, 150, 150, 0.75);
        background: rgba(255, 255, 255, 0.75);
        cursor: pointer;
        transition: all linear 0.4s;
    }
    .sideTool-itemIcon {
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 18px;
        line-height: 1.8em;
        text-align: center;
        transition: all linear 0.4s;

        &:hover {
            background: rgba(10, 10, 10, 0.75);
            color: #ffffff;
        }

        &:hover+.sideTool-itemPrompt {
            left: -250%;
            opacity: 1;
        }
    }
    .sideTool-itemPrompt {
        position: absolute;
        display: inline-block;
        top: 50%;
        left: -225%;
        transform: translateY(-50%);
        padding: 0.2em 0.4em 0.2em 0.55em;
        background: rgba(60, 60, 60, 1);
        color: #ffffff;
        font-size: 12px;
        font-weight: 300;
        letter-spacing: 0.15em;
        cursor: default;
        opacity: 0;
        transition: all linear 0.4s;

        &::before {
            content: '';
            position: absolute;
            width: 0.7em;
            height: 50%;
            right: -0.6em;
            top: 50%;
            transform: translateY(-50%);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            background: rgba(60, 60, 60, 1);
        }
    }
</style>
